﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Center - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  <!-- 将 Bootstrap 通过 CDN 引入 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <!-- 引入 iOS 设计风格 CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="./css/index.css">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
  <!-- 添加 utils.js 引用 -->
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  
  <!-- 页面特定的样式，覆盖 ios-design.css 中的一些样式 -->
  <style>
    /* 颜色变量定义 */
    :root {
      /* 基本颜色 */
      --text-color-light: #000;
      --text-color-dark: #fff;
      --bg-color-light: #F2F2F7;
      --bg-color-dark: #1C1C1E;
      --card-bg-light: rgba(255, 255, 255, 0.8);
      --card-bg-dark: rgba(44, 44, 46, 0.8);
      --border-color-light: #d1d1d6;
      --border-color-dark: #3a3a3c;
      
      /* 主题颜色 */
      --ios-blue-light: #007AFF;
      --ios-blue-dark: #0A84FF;
      --ios-purple-light: #5856D6;
      --ios-purple-dark: #5E5CE6;
      
      /* 辅助颜色 */
      --muted-text-light: #8E8E93;
      --muted-text-dark: #98989D;
      --highlight-bg-light: rgba(0, 122, 255, 0.1);
      --highlight-bg-dark: rgba(10, 132, 255, 0.2);
    }
    
    /* 页面样式 */
    body {
      padding-top: 70px; /* 为固定的导航栏留出空间 */
      background-color: var(--bg-color-light);
      color: var(--text-color-light);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      transition: background-color 0.3s ease, color 0.3s ease;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* 暗色模式样式 */
    body.dark-theme,
    body.auto-theme.dark-mode {
      background-color: var(--bg-color-dark);
      color: var(--text-color-dark);
    }
    
    /* 用户信息卡片样式调整 */
    .info-card {
      border-radius: 20px;
      border: none;
      background-color: var(--card-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-bottom: 25px;
      will-change: transform, box-shadow;
    }
    
    body.dark-theme .info-card,
    body.auto-theme.dark-mode .info-card {
      background-color: var(--card-bg-dark);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    
    .info-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }
    
    body.dark-theme .info-card:hover,
    body.auto-theme.dark-mode .info-card:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }
    
    /* 排名图标样式 */
    .rank-icon {
      display: inline-block;
      margin-right: 4px;
    }
    
    /* 前三名样式*/
    .rank-1 {
      background: linear-gradient(to right, rgba(255, 204, 0, 0.1), transparent 90%);
      font-weight: 700;
    }
    
    .rank-2 {
      background: linear-gradient(to right, rgba(142, 142, 147, 0.1), transparent 90%);
      font-weight: 600;
    }
    
    .rank-3 {
      background: linear-gradient(to right, rgba(52, 199, 89, 0.1), transparent 90%);
      font-weight: 500;
    }
    
    body.dark-theme .rank-1,
    body.auto-theme.dark-mode .rank-1 {
      background: linear-gradient(to right, rgba(255, 204, 0, 0.2), transparent 90%);
    }
    
    body.dark-theme .rank-2,
    body.auto-theme.dark-mode .rank-2 {
      background: linear-gradient(to right, rgba(142, 142, 147, 0.2), transparent 90%);
    }
    
    body.dark-theme .rank-3,
    body.auto-theme.dark-mode .rank-3 {
      background: linear-gradient(to right, rgba(52, 199, 89, 0.2), transparent 90%);
    }
    
    /* 当前用户高亮 */
    .table tbody tr.current-user {
      background-color: var(--highlight-bg-light);
      font-weight: 600;
    }
    
    body.dark-theme .table tbody tr.current-user,
    body.auto-theme.dark-mode .table tbody tr.current-user {
      background-color: var(--highlight-bg-dark);
    }
    
    /* 积分显示样式 */
    .info-value {
      font-weight: 600;
      color: var(--ios-blue-light);
      font-size: 1.1rem;
      display: inline-block;
      margin-left: 5px;
      position: relative;
      padding: 3px 12px;
      border-radius: 10px;
      background: var(--highlight-bg-light);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: transform, box-shadow;
    }
    
    body.dark-theme .info-value,
    body.auto-theme.dark-mode .info-value {
      color: var(--ios-blue-dark);
      background: var(--highlight-bg-dark);
    }
    
    /* 信息标题样式 */
    .info-title {
      font-weight: 600;
      color: var(--muted-text-light);
      margin-bottom: 8px;
      position: relative;
      display: inline-block;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .info-title,
    body.auto-theme.dark-mode .info-title {
      color: var(--muted-text-dark);
    }
    
    .info-title::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 30px;
      height: 2px;
      background: linear-gradient(to right, var(--ios-blue-light), var(--ios-purple-light));
      border-radius: 1px;
      transition: background 0.3s ease;
    }
    
    body.dark-theme .info-title::after,
    body.auto-theme.dark-mode .info-title::after {
      background: linear-gradient(to right, var(--ios-blue-dark), var(--ios-purple-dark));
    }
    
    /* 卡片文本 */
    .card-text {
      color: var(--text-color-light);
      transition: color 0.3s ease;
      margin-bottom: 16px;
    }
    
    body.dark-theme .card-text,
    body.auto-theme.dark-mode .card-text {
      color: var(--text-color-dark);
    }
    
    /* 按钮激活状态*/
    .btn-group .btn.active {
      background-color: var(--ios-blue-light) !important;
      color: white !important;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
    }
    
    body.dark-theme .btn-group .btn.active,
    body.auto-theme.dark-mode .btn-group .btn.active {
      background-color: var(--ios-blue-dark) !important;
      box-shadow: 0 4px 12px rgba(10, 132, 255, 0.25);
    }
    
    /* 按钮组样式美化*/
    .ios-btn-group {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      display: flex;
    }
    
    body.dark-theme .ios-btn-group,
    body.auto-theme.dark-mode .ios-btn-group {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .ios-btn-group .btn {
      border: none;
      padding: 10px 20px;
      background-color: var(--card-bg-light);
      color: var(--muted-text-light);
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      flex: 1;
      text-align: center;
    }
    
    body.dark-theme .ios-btn-group .btn,
    body.auto-theme.dark-mode .ios-btn-group .btn {
      background-color: var(--card-bg-dark);
      color: var(--muted-text-dark);
    }
    
    .ios-btn-group .btn:hover {
      background-color: var(--highlight-bg-light);
      color: var(--ios-blue-light);
    }
    
    body.dark-theme .ios-btn-group .btn:hover,
    body.auto-theme.dark-mode .ios-btn-group .btn:hover {
      background-color: var(--highlight-bg-dark);
      color: var(--ios-blue-dark);
    }
    
    .ios-btn-group .btn.active {
      background-color: var(--ios-blue-light);
      color: white;
    }
    
    body.dark-theme .ios-btn-group .btn.active,
    body.auto-theme.dark-mode .ios-btn-group .btn.active {
      background-color: var(--ios-blue-dark);
    }
    
    /* 历史记录按钮样式 */
    .history-btn {
      position: relative;
      right: 0;
      min-width: 200px; 
      padding: 12px 20px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-purple-light));
      color: white;
      font-weight: 600;
      border: none;
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-right: 0;
      text-align: center;
      overflow: hidden;
    }
    
    body.dark-theme .history-btn,
    body.auto-theme.dark-mode .history-btn {
      background: linear-gradient(135deg, var(--ios-blue-dark), var(--ios-purple-dark));
      box-shadow: 0 6px 16px rgba(10, 132, 255, 0.3);
    }
    
    .history-btn::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
      transform: rotate(45deg) translateX(-200%);
      transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .history-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 122, 255, 0.25);
      color: white;
    }
    
    body.dark-theme .history-btn:hover,
    body.auto-theme.dark-mode .history-btn:hover {
      box-shadow: 0 8px 25px rgba(10, 132, 255, 0.35);
    }
    
    .history-btn:hover::before {
      transform: rotate(45deg) translateX(200%);
    }
    
    /* 排行榜样式 */
    .leaderboard-table {
      background-color: var(--card-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    body.dark-theme .leaderboard-table,
    body.auto-theme.dark-mode .leaderboard-table {
      background-color: var(--card-bg-dark);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    
    .leaderboard-table thead th {
      border-top: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      color: var(--muted-text-light);
      font-weight: 600;
      padding: 16px;
      transition: color 0.3s ease, border-color 0.3s ease;
    }
    
    body.dark-theme .leaderboard-table thead th,
    body.auto-theme.dark-mode .leaderboard-table thead th {
      border-bottom-color: rgba(255, 255, 255, 0.1);
      color: var(--ios-blue-dark);
    }
    
    .leaderboard-table tbody tr {
      transition: background-color 0.3s ease, color 0.3s ease;
      color: var(--text-color-light);
    }
    
    body.dark-theme .leaderboard-table tbody tr,
    body.auto-theme.dark-mode .leaderboard-table tbody tr {
      color: var(--text-color-dark);
    }
    
    .leaderboard-table tbody tr:hover {
      background-color: var(--highlight-bg-light);
    }
    
    body.dark-theme .leaderboard-table tbody tr:hover,
    body.auto-theme.dark-mode .leaderboard-table tbody tr:hover {
      background-color: var(--highlight-bg-dark);
    }
    
    /* 页面内容容器 */
    .content-container {
      padding: 25px;
      border-radius: 20px;
      background-color: var(--card-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      margin-top: 25px;
      margin-bottom: 25px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    body.dark-theme .content-container,
    body.auto-theme.dark-mode .content-container {
      background-color: var(--card-bg-dark);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    
    /* 段落标题样式 */
    .ios-section-heading {
      font-weight: 700;
      margin-bottom: 25px;
      color: var(--text-color-light);
      position: relative;
      display: inline-block;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .ios-section-heading,
    body.auto-theme.dark-mode .ios-section-heading {
      color: var(--text-color-dark);
    }
    
    .ios-section-heading::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, var(--ios-blue-light), var(--ios-purple-light));
      border-radius: 1.5px;
      transition: background 0.3s ease;
    }
    
    body.dark-theme .ios-section-heading::after,
    body.auto-theme.dark-mode .ios-section-heading::after {
      background: linear-gradient(to right, var(--ios-blue-dark), var(--ios-purple-dark));
    }
    
    /* 添加动画效果 */
    .fade-in-up {
      animation: fadeInUp 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 添加延迟效果 */
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    /* 闇皮光效果 */
    .glow-effect {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      filter: blur(50px);
      z-index: -1;
      animation: pulse 8s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .glow-blue {
      top: 10%;
      right: 10%;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.2), transparent 70%);
    }
    
    .glow-purple {
      bottom: 10%;
      left: 5%;
      background: radial-gradient(circle, rgba(88, 86, 214, 0.15), transparent 70%);
      animation-delay: 2s;
    }
    
    body.dark-theme .glow-blue,
    body.auto-theme.dark-mode .glow-blue {
      background: radial-gradient(circle, rgba(10, 132, 255, 0.2), transparent 70%);
    }
    
    body.dark-theme .glow-purple,
    body.auto-theme.dark-mode .glow-purple {
      background: radial-gradient(circle, rgba(94, 92, 230, 0.15), transparent 70%);
    }
    
    @keyframes pulse {
      0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
      50% { transform: scale(1.05) translate(20px, -10px); opacity: 0.7; }
      100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    }
    
    /* 模态框样式 */
    .modal-content {
      background-color: var(--card-bg-light);
      border-radius: 16px;
      border: none;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;
    }
    
    body.dark-theme .modal-content,
    body.auto-theme.dark-mode .modal-content {
      background-color: var(--card-bg-dark);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }
    
    .modal-header, .modal-footer {
      border-color: var(--border-color-light);
      transition: border-color 0.3s ease;
    }
    
    body.dark-theme .modal-header,
    body.auto-theme.dark-mode .modal-header,
    body.dark-theme .modal-footer,
    body.auto-theme.dark-mode .modal-footer {
      border-color: var(--border-color-dark);
    }
    
    .modal-title {
      color: var(--text-color-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .modal-title,
    body.auto-theme.dark-mode .modal-title {
      color: var(--text-color-dark);
    }
    
    .close {
      color: var(--text-color-light);
      text-shadow: none;
      opacity: 0.7;
      transition: color 0.3s ease, opacity 0.3s ease;
    }
    
    body.dark-theme .close,
    body.auto-theme.dark-mode .close {
      color: var(--text-color-dark);
    }
    
    .close:hover {
      opacity: 1;
    }
    
    /* 表单控件 */
    .form-control {
      background-color: var(--bg-color-light);
      border-color: var(--border-color-light);
      color: var(--text-color-light);
      border-radius: 10px;
      padding: 10px 15px;
      transition: all 0.3s ease;
    }
    
    .form-control:focus {
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
      border-color: var(--ios-blue-light);
    }
    
    body.dark-theme .form-control,
    body.auto-theme.dark-mode .form-control {
      background-color: #3A3A3C;
      border-color: var(--border-color-dark);
      color: var(--text-color-dark);
    }
    
    body.dark-theme .form-control:focus,
    body.auto-theme.dark-mode .form-control:focus {
      box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.25);
      border-color: var(--ios-blue-dark);
    }
    
    /* 表单标签 */
    .form-group label {
      color: var(--text-color-light);
      font-weight: 500;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .form-group label,
    body.auto-theme.dark-mode .form-group label {
      color: var(--text-color-dark);
    }
    
    /* 主题切换按钮 */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      background-color: var(--card-bg-light);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    body.dark-theme .theme-toggle,
    body.auto-theme.dark-mode .theme-toggle {
      background-color: #3a3a3c;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .theme-toggle i {
      font-size: 22px;
      color: var(--muted-text-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .theme-toggle i,
    body.auto-theme.dark-mode .theme-toggle i {
      color: var(--text-color-dark);
    }
    
    /* 毛玻璃效果*/
    .frosted-glass {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.05);
      transition: background-color 0.5s ease;
    }
    
    body.dark-theme .frosted-glass,
    body.auto-theme.dark-mode .frosted-glass {
      background: rgba(0, 0, 0, 0.05);
    }
    
    /* 设置文本高对比度 - 让黑夜模式更清楚易读 */
    /* 已移除重复的body.dark-theme, body.auto-theme.dark-mode定义 */
    
    /* 优化移动设备排版 */
    @media (max-width: 768px) {
      .ios-btn-group {
        flex-direction: column;
      }
      
      .ios-btn-group .btn {
        border-radius: 0;
      }
      
      .ios-btn-group .btn:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
      }
      
      .ios-btn-group .btn:last-child {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
      }
      
      .history-btn {
        width: 100%;
        margin-top: 15px;
      }
      
      .content-container {
        padding: 20px 15px;
      }
    }
    
    /* iOS风格排行榜样式简介*/
    .leaderboard-section {
      margin-bottom: 30px;
    }
    
    /* iOS风格分段控制器*/
    .ios-segment-control {
      display: flex;
      background-color: rgba(120, 120, 128, 0.12);
      border-radius: 10px;
      padding: 3px;
      margin-bottom: 20px;
      max-width: 550px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease;
      height: 44px;
    }
    
    body.dark-theme .ios-segment-control,
    body.auto-theme.dark-mode .ios-segment-control {
      background-color: rgba(120, 120, 128, 0.32);
    }
    
    .ios-segment-control .segment {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-color-light);
      border: none;
      background: transparent;
      position: relative;
      z-index: 2;
      transition: color 0.3s ease;
      outline: none;
      cursor: pointer;
      height: 100%;
    }
    
    body.dark-theme .ios-segment-control .segment,
    body.auto-theme.dark-mode .ios-segment-control .segment {
      color: var(--text-color-dark);
    }
    
    .ios-segment-control .segment.active {
      color: var(--text-color-light);
    }
    
    body.dark-theme .ios-segment-control .segment.active,
    body.auto-theme.dark-mode .ios-segment-control .segment.active {
      color: var(--text-color-dark);
    }
    
    /* 分段控制选择器 */
    .segment-selector {
      position: absolute;
      height: calc(100% - 6px);
      top: 3px;
      left: 3px;
      z-index: 1;
      border-radius: 8px;
      background-color: white;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    body.dark-theme .segment-selector,
    body.auto-theme.dark-mode .segment-selector {
      background-color: rgba(30, 30, 30, 0.8);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }
    
    .ios-segment-control .segment i {
      margin-right: 6px;
      color: inherit;
      font-size: 14px;
      line-height: 1;
    }
    
    /* iOS表格卡片样式 */
    .ios-card-table {
      border-radius: 12px;
      background-color: var(--card-bg-light);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 20px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    body.dark-theme .ios-card-table,
    body.auto-theme.dark-mode .ios-card-table {
      background-color: var(--card-bg-dark);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    
    /* 表格头部样式 */
    .ios-table-header {
      padding: 15px;
      border-bottom: 1px solid rgba(60, 60, 67, 0.1);
      display: flex;
      font-weight: 500;
      color: var(--muted-text-light);
      font-size: 13px;
      letter-spacing: -0.08px;
      transition: border-color 0.3s ease, color 0.3s ease;
    }
    
    body.dark-theme .ios-table-header,
    body.auto-theme.dark-mode .ios-table-header {
      border-bottom-color: rgba(84, 84, 88, 0.3);
      color: var(--muted-text-dark);
    }
    
    .ios-table-header .col-rank {
      width: 15%;
      padding-left: 5px;
    }
    
    .ios-table-header .col-user {
      width: 50%;
    }
    
    .ios-table-header .col-points {
      width: 35%;
      text-align: right;
      padding-right: 15px;
    }
    
    /* 表格内容样式 */
    .ios-table-row {
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-bottom: 1px solid rgba(60, 60, 67, 0.1);
      transition: background-color 0.2s ease, border-color 0.3s ease;
      color: var(--text-color-light);
    }
    
    .ios-table-row:last-child {
      border-bottom: none;
    }
    
    body.dark-theme .ios-table-row,
    body.auto-theme.dark-mode .ios-table-row {
      border-bottom-color: rgba(84, 84, 88, 0.3);
      color: var(--text-color-dark);
    }
    
    .ios-table-row:hover {
      background-color: rgba(0, 122, 255, 0.05);
    }
    
    body.dark-theme .ios-table-row:hover,
    body.auto-theme.dark-mode .ios-table-row:hover {
      background-color: rgba(10, 132, 255, 0.1);
    }
    
    .ios-table-row .col-rank {
      width: 15%;
      font-weight: 600;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-width: 50px;
    }
    
    .ios-table-row .col-user {
      width: 50%;
      font-size: 16px;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
    }

    /* 用户头像样式 */
    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
      border: 2px solid rgba(0, 122, 255, 0.1);
      transition: all 0.3s ease;
      flex-shrink: 0;
    }

    .user-avatar:hover {
      transform: scale(1.1);
      border-color: rgba(0, 122, 255, 0.3);
    }

    /* 排行榜样式全部限定在 #leaderboard-content 下，避免全局冲突 */
    #leaderboard-content .ios-table-row.top-rank {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 255, 255, 0.03));
      position: relative;
      overflow: hidden;
    }
    /* 将左侧彩条绘制在排名列上，避免与背景伪元素冲突 */
    #leaderboard-content .ios-table-row.top-rank .col-rank { position: relative; }
    #leaderboard-content .ios-table-row.top-rank .col-rank::before {
      content: '';
      position: absolute;
      left: -12px; /* 对齐到行左内边缘 */
      top: 4px;
      bottom: 4px;
      width: 6px;
      border-radius: 3px;
      z-index: 3; /* 高于行的hover遮罩 */
      background: #FFD700; /* 默认给rank-1颜色，具体在下面覆盖 */
      pointer-events: none;
    }
    #leaderboard-content .ios-table-row.rank-1 .col-rank::before { background: #FFD700; }
    #leaderboard-content .ios-table-row.rank-2 .col-rank::before { background: #C0C0C0; }
    #leaderboard-content .ios-table-row.rank-3 .col-rank::before { background: #CD7F32; }
    #leaderboard-content .ios-table-row.rank-1 {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 255, 255, 0.03));
    }
    #leaderboard-content .ios-table-row.rank-2 {
      background: linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(255, 255, 255, 0.03));
    }
    #leaderboard-content .ios-table-row.rank-3 {
      background: linear-gradient(135deg, rgba(205, 127, 50, 0.12), rgba(255, 255, 255, 0.03));
    }
    #leaderboard-content .ios-table-row .col-rank {
      padding-left: 12px; /* 保持与竖条间距 */
    }
    #leaderboard-content .ios-table-header .col-rank {
      padding-left: 12px;
    }
    /* 头像圆环修饰 */
    #leaderboard-content .avatar-wrap {
      display: inline-block;
      width: 36px; height: 36px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      margin-right: 10px;
      vertical-align: middle;
      background: transparent;
    }
    #leaderboard-content .avatar-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      z-index: 2;
      border: 2.5px solid #e0e0e0;
      box-sizing: border-box;
      opacity: 0.7;
    }
    #leaderboard-content .ios-table-row.rank-1 .avatar-wrap::before {
      border-color: #FFD700;
      box-shadow: 0 0 8px 2px #FFD70044;
      opacity: 0.9;
    }
    #leaderboard-content .ios-table-row.rank-2 .avatar-wrap::before {
      border-color: #C0C0C0;
      box-shadow: 0 0 8px 2px #C0C0C044;
      opacity: 0.9;
    }
    #leaderboard-content .ios-table-row.rank-3 .avatar-wrap::before {
      border-color: #CD7F32;
      box-shadow: 0 0 8px 2px #CD7F3244;
      opacity: 0.9;
    }
    #leaderboard-content .avatar-wrap img.user-avatar {
      width: 100%; height: 100%;
      border-radius: 50%;
      display: block;
      object-fit: cover;
      position: relative;
      z-index: 1;
      border: none;
      background: #fff;
    }
    
    .ios-table-row .col-points {
      width: 35%;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: var(--ios-blue-light);
      padding-right: 15px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .ios-table-row .col-points,
    body.auto-theme.dark-mode .ios-table-row .col-points {
      color: var(--ios-blue-dark);
    }
    
    /* 前三名特殊样式*/
    .ios-table-row.top-rank {
      position: relative;
    }
    
    .ios-table-row.top-rank::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.1;
      pointer-events: none;
      z-index: 0;
      border-radius: 0 0 12px 12px;
      transition: opacity 0.3s ease;
    }
    
    body.dark-theme .ios-table-row.top-rank::before,
    body.auto-theme.dark-mode .ios-table-row.top-rank::before {
      opacity: 0.15;
    }
    
    .ios-table-row.rank-1::before {
      background: linear-gradient(to right, #FFD700, transparent 80%);
    }
    
    .ios-table-row.rank-2::before {
      background: linear-gradient(to right, #C0C0C0, transparent 80%);
    }
    
    .ios-table-row.rank-3::before {
      background: linear-gradient(to right, #CD7F32, transparent 80%);
    }
    
    /* 排名标记 */
    .rank-medal {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 12px;
      font-size: 14px;
      color: white;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
      position: relative;
      flex-shrink: 0;
      font-weight: 600;
    }
    
    .rank-medal.gold {
      background-color: #FFD700;
      background-image: linear-gradient(135deg, #FFD700, #FFC107);
      color: #B8860B;
    }
    
    .rank-medal.silver {
      background-color: #C0C0C0;
      background-image: linear-gradient(135deg, #E0E0E0, #9E9E9E);
      color: #696969;
    }
    
    .rank-medal.bronze {
      background-color: #CD7F32;
      background-image: linear-gradient(135deg, #CD7F32, #8B4513);
      color: #654321;
    }

    .rank-medal i {
      font-size: 16px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .rank-medal.normal {
      background-color: #8E8E93;
      font-size: 12px;
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
    
    body.dark-theme .rank-medal.normal,
    body.auto-theme.dark-mode .rank-medal.normal {
      background-color: #636366;
      color: white;
    }
    
    /* 当前用户突出显示 */
    .ios-table-row.current-user {
      background-color: rgba(0, 122, 255, 0.08);
      font-weight: 500;
    }
    
    body.dark-theme .ios-table-row.current-user,
    body.auto-theme.dark-mode .ios-table-row.current-user {
      background-color: rgba(10, 132, 255, 0.15);
    }
    
    /* 无数据提示*/
    .ios-empty-state {
      padding: 40px 20px;
      text-align: center;
      color: var(--muted-text-light);
      font-size: 16px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .ios-empty-state,
    body.auto-theme.dark-mode .ios-empty-state {
      color: var(--muted-text-dark);
    }
    
    .ios-empty-state i {
      font-size: 40px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    /* 加载动画 */
    .ios-loading {
      display: none;
      padding: 30px;
      text-align: center;
    }
    
    /* 浼樺寲鐨刬OS椋庢牸加载动画 */
    .ios-loader {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 30px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      transition: all 0.3s var(--animation-timing-apple);
      margin: 20px auto;
      width: 200px;
    }
    
    /* 加载动画鍦嗙幆 */
    .ios-loader-ring {
      position: relative;
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
    }
    
    .ios-loader-ring::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid rgba(0, 122, 255, 0.2);
    }
    
    .ios-loader-ring::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: var(--ios-blue-light);
      animation: ios-loader-rotate 1.5s linear infinite;
    }
    
    @keyframes ios-loader-rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .ios-loader-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 16px 0;
    }
    
    .ios-loader-dot {
      width: 10px;
      height: 10px;
      margin: 0 5px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-purple-light));
      opacity: 0;
      transform: scale(0.8);
      animation: ios-loader-pulse 1.5s infinite ease-in-out;
    }
    
    .ios-loader-dot:nth-child(1) {
      animation-delay: 0s;
    }
    
    .ios-loader-dot:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .ios-loader-dot:nth-child(3) {
      animation-delay: 0.4s;
    }
    
    .ios-loader-text {
      font-size: 16px;
      font-weight: 500;
      margin-top: 8px;
      color: var(--muted-text-light);
      opacity: 0.9;
  background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-purple-light));
  background-clip: text;
  -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: ios-loader-text-pulse 1.5s infinite ease-in-out;
    }
    
    @keyframes ios-loader-pulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes ios-loader-text-pulse {
      0%, 100% {
        opacity: 0.7;
      }
      50% {
        opacity: 1;
      }
    }
    
    /* 气泡动画效果 */
    .bubble {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.3), rgba(88, 86, 214, 0.1));
      box-shadow: 0 0 10px rgba(0, 122, 255, 0.2);
      animation: bubble-float 3s ease-in infinite;
      opacity: 0;
      z-index: -1;
    }
    
    @keyframes bubble-float {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
      }
      50% {
        opacity: 0.6;
        transform: translateY(-40px) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5);
      }
    }
    
    /* 加载器周围的光晕效果 */
    .ios-loader::after {
      content: '';
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, transparent 70%);
      z-index: -1;
      animation: ios-loader-glow 2s infinite alternate ease-in-out;
    }
    
    @keyframes ios-loader-glow {
      0% {
        opacity: 0.5;
        transform: scale(0.9);
      }
      100% {
        opacity: 0.8;
        transform: scale(1.1);
      }
    }
    
    body.dark-theme .ios-loader-ring::before,
    body.auto-theme.dark-mode .ios-loader-ring::before {
      border-color: rgba(10, 132, 255, 0.15);
    }
    
    body.dark-theme .ios-loader-ring::after,
    body.auto-theme.dark-mode .ios-loader-ring::after {
      border-top-color: var(--ios-blue-dark);
    }
    
    body.dark-theme .ios-loader,
    body.auto-theme.dark-mode .ios-loader {
      background-color: rgba(44, 44, 46, 0.3);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    
    /* 美化用户信息卡片 */
    /* 已移除重复的.info-card定义 */
    
    .info-card .card-body {
      padding: 30px;
      transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    /* 信息值标签的美化 */
    /* 已移除重复的.info-value定义 */
    
    .info-value::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(45deg) translateY(-100%);
      transition: transform 0.7s ease;
      pointer-events: none;
      z-index: 1;
    }
    
    .info-value:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.15);
    }
    
    .info-value:hover::after {
      transform: rotate(45deg) translateY(100%);
    }
    
    /* 优化卡片内元素的动画协调性 */
    .info-card:hover .info-value:not(:hover) {
      /* 当卡片悬浮但info-value未悬浮时，保持较小的动画 */
      transform: translateY(-1px);
    }
    
    /* 已移除重复的body.dark-theme .info-value, body.auto-theme.dark-mode .info-value定义 */
    
    body.dark-theme .info-value:hover,
    body.auto-theme.dark-mode .info-value:hover {
      box-shadow: 0 6px 16px rgba(10, 132, 255, 0.25);
    }
    
    /* iOS 排行榜表格样式 */
    /* 已移除重复的.ios-card-table定义 */
    
    .ios-card-table:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }
    
    body.dark-theme .ios-card-table:hover,
    body.auto-theme.dark-mode .ios-card-table:hover {
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    }
    
    
    /* 排行卡的渐变光效果 */
    /* 已移除重复的.ios-table-row定义 */
    
    .ios-table-row::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to right,
        rgba(0, 122, 255, 0.05) 0%,
        rgba(0, 122, 255, 0) 100%
      );
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    .ios-table-row:hover::after {
      opacity: 1;
    }
    
    body.dark-theme .ios-table-row::after,
    body.auto-theme.dark-mode .ios-table-row::after {
      background: linear-gradient(
        to right,
        rgba(10, 132, 255, 0.1) 0%,
        rgba(10, 132, 255, 0) 100%
      );
    }
    
    /* 排行行的装饰 */
    /* 已移除重复的.rank-medal定义 */
    
    /* 已移除重复的.rank-medal.gold定义 */
    
    /* 已移除重复的.rank-medal.silver定义 */
    
    /* 已移除重复的.rank-medal.bronze定义 */
    
    .ios-table-row:hover .rank-medal {
      transform: scale(1.1) rotate(5deg);
    }
    
    /* 鍐呭瀹瑰櫒缇庡寲 */
    /* 已移除重复的.content-container定义 */
    
    .content-container:hover {
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }
    
    body.dark-theme .content-container:hover,
    body.auto-theme.dark-mode .content-container:hover {
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }
    
    /* 主题切换按钮样式 */
    /* 已移除重复的.theme-toggle定义 */
    
    .theme-toggle:hover {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    body.dark-theme .theme-toggle:hover,
    body.auto-theme.dark-mode .theme-toggle:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
    
    /* 已移除重复的.theme-toggle i定义 */
    
    .theme-toggle:hover i {
      transform: scale(1.1);
    }
    
    /* 分段控制器额外样式 */
    /* 已移除重复的.ios-segment-control定义 */
    
    .ios-segment-control:hover {
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }
    
    body.dark-theme .ios-segment-control:hover,
    body.auto-theme.dark-mode .ios-segment-control:hover {
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }
    
    /* 已移除重复的.segment-selector定义 */
    
    /* 已移除重复的body.dark-theme .segment-selector, body.auto-theme.dark-mode .segment-selector定义 */
    
    /* 添加顶部信息栏样式 */
    .top-user-info-bar {
      background-color: #262628; /* 深色主题的背景色 */
      color: #FFFFFF;
      padding: 15px 0;
      position: relative;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .top-user-info-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .carbon-saved-info {
      font-size: 1.1rem;
      font-weight: 500;
      display: flex;
      align-items: center;
    }
    
    .carbon-saved-value {
      color: var(--ios-blue-dark);
      font-weight: 600;
      margin-left: 10px;
      background: rgba(10, 132, 255, 0.15);
      padding: 5px 12px;
      border-radius: 10px;
      display: inline-block;
      box-shadow: 0 2px 8px rgba(10, 132, 255, 0.2);
    }
    
    .top-actions {
      display: flex;
      gap: 15px;
    }
    
    .edit-profile-btn {
      background: linear-gradient(135deg, var(--ios-blue-dark), var(--ios-indigo));
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 12px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(10, 132, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    
    .edit-profile-btn::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
      transform: rotate(45deg) translateX(-200%);
      transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .edit-profile-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(10, 132, 255, 0.25);
      color: white;
    }
    
    .edit-profile-btn:hover::before {
      transform: rotate(45deg) translateX(200%);
    }
    
    .reduction-history-btn {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 12px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(52, 199, 89, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    
    .reduction-history-btn::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
      transform: rotate(45deg) translateX(-200%);
      transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .reduction-history-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(52, 199, 89, 0.25);
      color: white;
    }
    
    .reduction-history-btn:hover::before {
      transform: rotate(45deg) translateX(200%);
    }

    /* 注：为 注销账户 (Delete Account) 按钮添加 iOS 风格红色背景 */
    .deactivate-btn {
      /* 使用高优先级样式以覆盖 Bootstrap 的默认 btn 样式 */
      background: linear-gradient(135deg, #FF3B30, #FF6B6B) !important;
      color: #ffffff !important;
      border: none !important;
      padding: 10px 20px !important;
      border-radius: 12px !important;
      font-weight: 600 !important;
      box-shadow: 0 4px 12px rgba(255, 59, 48, 0.18) !important;
      transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
      display: flex !important;
      align-items: center !important;
    }

    .deactivate-btn:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 8px 25px rgba(255, 59, 48, 0.26) !important;
      color: #ffffff !important;
    }

    body.dark-theme .deactivate-btn,
    body.auto-theme.dark-mode .deactivate-btn {
      background: linear-gradient(135deg, #FF453A, #FF7A7A) !important;
      box-shadow: 0 4px 12px rgba(255, 69, 58, 0.25) !important;
      color: #ffffff !important;
    }

    /* 强制让图标与文字为白色（覆盖其他 color 规则） */
    .deactivate-btn i,
    .deactivate-btn .fas,
    .deactivate-btn .fa {
      color: #ffffff !important;
    }
    
    @media (max-width: 768px) {
      .top-user-info-bar .container {
        flex-direction: column;
        gap: 15px;
      }
      
      .top-actions {
        width: 100%;
        justify-content: space-between;
      }
      
      .edit-profile-btn, .reduction-history-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
      }
    }
    
    body.light-theme .top-user-info-bar {
      background-color: #F2F2F7;
      color: #000000;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    body.light-theme .carbon-saved-value {
      color: var(--ios-blue-light);
      background: rgba(0, 122, 255, 0.1);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
    }
    
    body.light-theme .edit-profile-btn {
      background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-purple-light));
    }
    
    body.light-theme .reduction-history-btn {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
    }
    
    /* 新增样式 - iOS 风格成功按钮 */
    .btn-ios-success {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 12px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(52, 199, 89, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .btn-ios-success:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(52, 199, 89, 0.25);
      color: white;
    }
    
    body.dark-theme .btn-ios-success,
    body.auto-theme.dark-mode .btn-ios-success {
      background: linear-gradient(135deg, #30D158, #39AD91);
      box-shadow: 0 4px 12px rgba(48, 209, 88, 0.3);
    }
    
    body.dark-theme .btn-ios-success:hover,
    body.auto-theme.dark-mode .btn-ios-success:hover {
      box-shadow: 0 8px 25px rgba(48, 209, 88, 0.4);
    }

    /* 头像展示与选择样式 */
    .avatar-display {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    .avatar-img {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-color-light);
      border: 2px solid var(--border-color-light);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .avatar-img:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
    
    body.dark-theme .avatar-img,
    body.auto-theme.dark-mode .avatar-img {
      background: var(--bg-color-dark);
      border-color: var(--border-color-dark);
    }
    .avatar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .avatar-option {
      padding: 10px;
      border-radius: 12px;
      border: 2px solid transparent;
      background: var(--card-bg-light);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    body.dark-theme .avatar-option,
    body.auto-theme.dark-mode .avatar-option {
      background: var(--card-bg-dark);
    }
    .avatar-option:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
    .avatar-option.selected { border-color: var(--ios-blue-light); box-shadow: 0 0 0 4px rgba(0,122,255,0.12); }
    body.dark-theme .avatar-option.selected,
    body.auto-theme.dark-mode .avatar-option.selected { border-color: var(--ios-blue-dark); box-shadow: 0 0 0 4px rgba(10,132,255,0.2); }
    .avatar-option img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
  </style>
</head>
<body class="auto-theme">
<!-- 添加毛玻璃背景效果 -->
<div class="frosted-glass"></div>

<!-- 添加发光效果 -->
<div class="glow-effect glow-blue"></div>
<div class="glow-effect glow-purple"></div>

<!-- 导航内容将由 JavaScript 加载 -->
<div id="navbar-container"></div>

<!-- Main content starts here -->
<div class="container content-container fade-in-up delay-1">
  <h2 class="ios-section-heading">User Center</h2>
  <div class="row">
    <div class="col-md-12">
      <div class="info-card fade-in-up delay-2">
        <div class="card-body">
          <div class="avatar-display">
            <img id="userAvatarImg" class="avatar-img" src="img/avatars/avatar1.svg" alt="User Avatar" />
            <div>
              <div class="info-title">My Avatar</div>
              <div>
                <button type="button" class="btn btn-sm btn-ios-primary ml-0" data-toggle="modal" data-target="#changeAvatarModal" id="changeAvatarBtn">
                  <i class="fas fa-user-circle mr-2"></i>Change Avatar
                </button>
              </div>
            </div>
          </div>

          <h5 class="info-title">My School</h5>
          <p class="card-text">Your school is: <span class="info-value" id="userSchool">加载中 Loading...</span></p>
          
          <h5 class="info-title">My Region</h5>
          <p class="card-text">You are at: <span class="info-value" id="userLocation">加载中 Loading...</span></p>
          
          <h5 class="info-title">My Carbon Credits</h5>
          <p class="card-text">Your current carbon credits balance is: <span class="info-value" id="userPoints">加载中 Loading...</span></p>
          
          <h5 class="info-title">My Carbon Reduction (CO2 in kg)</h5>
          <p class="card-text">You have saved a total of: <span class="info-value" id="userReduction">加载中 Loading...</span></p>
          
          <div class="text-right mt-4">
            <button type="button" class="btn btn-ios-primary" data-toggle="modal" data-target="#editUserModal">
              <i class="fas fa-user-edit mr-2"></i>Edit My Profile
            </button>
            <button type="button" class="btn btn-ios-success ml-2" id="viewHistoryBtn">
              <i class="fas fa-history mr-2"></i>View Carbon Reduction History
            </button>
            <button type="button" class="btn deactivate-btn ml-2" id="deactivateAccountBtn">
              <i class="fas fa-user-slash mr-2"></i>注销账户&nbsp;Delete Account
            </button>
      </div>
          </div>
          </div>
      </div>
        </div>
      </div>

<div class="container content-container fade-in-up delay-4">
  <h2 class="ios-section-heading">Carbon Credits Leaderboards</h2>
  
  <!-- iOS 风格分段控制器 -->
  <div class="ios-segment-control">
    <button class="segment active" data-type="all">
      <i class="fas fa-globe-asia"></i>Global
        </button>
    <button class="segment" data-type="local">
      <i class="fas fa-map-marker-alt"></i>Regional
    </button>
    <button class="segment" data-type="school">
      <i class="fas fa-school"></i>School
    </button>
    <div class="segment-selector"></div>
      </div>
  
  <!-- iOS椋庢牸鍗＄墖琛ㄦ牸 -->
  <div class="ios-card-table fade-in-up delay-5">
    <!-- 加载动画 -->
    <div class="ios-loading">
      <div class="ios-loader">
        <div class="ios-loader-ring"></div>
        <div class="ios-loader-dots">
          <div class="ios-loader-dot"></div>
          <div class="ios-loader-dot"></div>
          <div class="ios-loader-dot"></div>
          </div>
        <div class="ios-loader-text">加载排行榜数据 Loading...</div>
        <!-- 气泡动画效果 -->
        <div class="bubble" style="left: 20%; animation-delay: 0s;"></div>
        <div class="bubble" style="left: 40%; animation-delay: 1s;"></div>
        <div class="bubble" style="left: 60%; animation-delay: 0.5s;"></div>
        <div class="bubble" style="left: 80%; animation-delay: 1.5s;"></div>
          </div>
            </div>

    <!-- 排行榜内容容器 -->
    <div id="leaderboard-content">
      <!-- 内容将由 JavaScript 生成 -->
          </div>
          </div>
        </div>

<!-- 添加编辑用户资料的模态框 -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editUserModalLabel">编辑用户资料 Edit Profile</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editUserForm">
          <div class="form-group">
            <label for="userCountrySelect">国家/地区 Country/Region</label>
            <select class="form-control" id="userCountrySelect">
              <option value="">加载中 Loading...</option>
            </select>
          </div>
          <div class="form-group">
            <label for="userStateSelect">省/州 State/Province</label>
            <select class="form-control" id="userStateSelect">
              <option value="">请先选择国家 Please select a country first</option>
            </select>
          </div>
          <div class="form-group">
            <label for="userSchoolSelect">学校 School</label>
            <select class="form-control" id="userSchoolSelect">
              <option value="">加载中 Loading...</option>
            </select>
          </div>
          <div class="form-group" id="userSchoolInputGroup" style="display: none;">
            <label for="userSchoolInput">输入学校名称 Enter School Name</label>
            <input type="text" class="form-control" id="userSchoolInput" placeholder="请输入学校名称">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消 Cancel</button>
            <button type="submit" class="btn btn-ios-primary">保存 Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 更改头像 Modal -->
<div class="modal fade" id="changeAvatarModal" tabindex="-1" aria-labelledby="changeAvatarLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changeAvatarLabel">选择头像 Choose an Avatar</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="avatar-grid" id="avatarGrid">
          <!-- Avatars will be loaded dynamically -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消 Cancel</button>
        <button type="button" class="btn btn-ios-primary" id="saveAvatarBtn">保存 Save</button>
      </div>
    </div>
  </div>
  </div>

<!-- 主题切换按钮 -->
<div class="theme-toggle" id="themeToggle">
  <i class="fas fa-moon"></i>
</div>

<!-- 澶嶅埗鎮ㄤ富椤电殑椤佃剼 -->
<div id="footer-placeholder"></div>

<script>
  $(document).ready(function() {
    // 主题切换功能
    initThemeToggle();
    
    // 添加按钮点击处理函数
    $('.ios-btn-group .btn').click(function() {
      $('.ios-btn-group .btn').removeClass('active');
      $(this).addClass('active');
    });
    
    // 添加历史记录查看按钮点击事件
    $('#viewHistoryBtn').on('click', function() {
      window.location.href = 'pthis.html';
    });
    $('#deactivateAccountBtn').on('click', function() {
      const token = localStorage.getItem('token');
      if (!token) {
        showAlert('请先登录 / Please log in first', 'warning', function() { window.location.href = 'index.html'; });
        return;
      }
      if (!confirm('确定要注销您的账号吗？ Delete your account?')) {
        return;
      }
      const $btn = $(this);
      const originalHtml = $btn.html();
      $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Processing...');
      $.ajax({
        url: 'deactivate_account.php',
        type: 'POST',
        data: { token: token },
        dataType: 'json'
      }).done(function(response) {
        if (response.success) {
          showAlert('账号已成功注销 Account deleted successfully.', 'success', function() {
            if (typeof logout === 'function') {
              logout();
            } else {
              localStorage.clear();
            }
            window.location.href = 'index.html';
          });
        } else {
          showAlert(response.message || '操作失败，请稍后再试 Failed to delete account.', 'error');
        }
      }).fail(function() {
        showAlert('无法连接到服务器，稍后重试 Could not reach server.', 'error');
      }).always(function() {
        $btn.prop('disabled', false).html(originalHtml);
      });
    });
    
    // 初始化排行榜类型选择按钮
    bindRankingButtons();
    
    // 初始化选择器（延迟）
    setTimeout(initSegmentSelector, 100); // 添加延迟以等待 DOM 元素加载
    
    // 窗口大小变化时重新定位选择器
    $(window).on('resize', function() {
      initSegmentSelector();
    });
    
    // 加载排行榜
    switchRanking('all');
    
    // 加载用户数据
    loadUserData();
    
    // 监听模态弹窗显示事件，填充用户资料
    $('#editUserModal').on('show.bs.modal', function () {
      prepopulateUserForm();
    });

    // 更改头像：点击选中效果（ID-based）
    $('#avatarGrid').on('click', '.avatar-option', function() {
      $('#avatarGrid .avatar-option').removeClass('selected');
      $(this).addClass('selected');
    });

    // 打开头像弹窗时加载并预选当前头像
    $('#changeAvatarModal').on('show.bs.modal', function() {
      loadAvatarChoices();
    });

    // 保存头像（通过avatar_id）
    $('#saveAvatarBtn').on('click', function() {
      const selectedId = $('#avatarGrid .avatar-option.selected').data('id');
      if (!selectedId) {
        showAlert('请选择一个头像 Please choose an avatar', 'warning');
        return;
      }
      const token = localStorage.getItem('token');
      if (!token) {
        showAlert('请先登录 Please log in', 'warning');
        return;
      }
      const btn = $(this);
      const original = btn.html();
      btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>保存中...');

      $.ajax({
        type: 'POST',
        url: 'set_user_avatar.php',
        data: { token: token, avatar_id: selectedId },
        dataType: 'json',
        success: function(resp){
          btn.prop('disabled', false).html(original);
          if (resp && resp.success) {
            // 更新本地与页面
            const selectedUrl = $('#avatarGrid .avatar-option.selected img').attr('src');
            localStorage.setItem('userAvatarId', String(selectedId));
            if (selectedUrl) localStorage.setItem('userAvatarUrl', selectedUrl);
            $('#userAvatarImg').attr('src', selectedUrl || 'img/avatars/avatar1.svg');
            $('#changeAvatarModal').modal('hide');
            showAlert('头像已更新 Avatar updated', 'success');
            // 更新导航栏头像（如果函数可用）
            if (typeof fetchAndRenderNavbarAvatar === 'function') {
              fetchAndRenderNavbarAvatar();
            } else {
              const cachedUrl = localStorage.getItem('userAvatarUrl');
              if (cachedUrl) $('#navbarUserAvatar').attr('src', cachedUrl);
              $('#navbarAvatarContainer').show();
            }
          } else {
            showAlert('更新失败: ' + (resp && (resp.error || resp.message) || 'Unknown error'), 'error');
          }
        },
        error: function(xhr){
          btn.prop('disabled', false).html(original);
          showAlert('服务器错误，稍后再试 Server error', 'error');
          console.error(xhr.responseText);
        }
      });
    });

    // 监听学校选择的变化
    $('#userSchoolSelect').change(function () {
      if ($(this).val() == 'other') {
        $('#userSchoolInputGroup').show();
      } else {
        $('#userSchoolInputGroup').hide();
      }
    });

    // Listen for country select changes to update province/state data
    $('#userCountrySelect').change(function() {
      const countryCode = $(this).val();
      if (countryCode) {
        // Update province/state options after country selection
        updateStates(countryCode).catch(error => {
          console.error('Failed to update states/provinces:', error);
        });
      } else {
        // Clear province/state dropdown if no country is selected
        const statesSelect = document.getElementById('userStateSelect');
        if (statesSelect) {
          statesSelect.innerHTML = '<option value="">Please select a country first</option>';
        }
      }
    });

    // 监听表单提交事件
    $('#editUserForm').submit(function (e) {
      e.preventDefault();
      
      // 显示加载提示
      const submitBtn = $(this).find('button[type="submit"]');
      const originalBtnText = submitBtn.html();
      submitBtn.html('<i class="fas fa-spinner fa-spin mr-2"></i>保存中...');
      submitBtn.prop('disabled', true);
      
      var school = $('#userSchoolSelect').val();
      var schoolName = ''; // 用于存储学校名称
      var isNewSchool = false;

      // 检查用户是否选择了"其他"选项
      if (school === 'other') {
        schoolName = $('#userSchoolInput').val(); // 从输入框获取学校名称
        if (!schoolName || schoolName.trim() === '') {
          // 显示错误提示
          showAlert('请输入学校名称 / Please enter a school name', 'warning');
          submitBtn.html(originalBtnText);
          submitBtn.prop('disabled', false);
          return;
        }
        isNewSchool = true;
      } else if (school) {
        // 从下拉列表中获取学校名称
        schoolName = $('#userSchoolSelect option:selected').text();
        if (schoolName === '请选择学校Select school') {
          schoolName = '';
        }
      }
      
      var country = $('#userCountrySelect').val();
      var state = $('#userStateSelect').val();
      var token = localStorage.getItem('token');
      
      // 构建请求数据
      var requestData = {
        token: token
      };
      
      // 只包含有值的字段，设置请求参数
      if (schoolName) requestData.school = schoolName;
      if (state) requestData.state = state;
      if (country) requestData.country = country;
      if (isNewSchool) requestData.new_sch = true;
      
      // 提交数据到后端
      $.ajax({
        type: 'POST',
        url: 'edit_user_info.php',
        data: requestData,
        dataType: 'json',
        success: function (response) {
          // 恢复按钮状态
          submitBtn.html(originalBtnText);
          submitBtn.prop('disabled', false);
          
          if (response.success) {
            // 显示成功消息
            showAlert('信息更新成功，Profile updated successfully!', 'success');
            $('#editUserModal').modal('hide');
            
            // 刷新用户数据
            loadUserData();
          } else {
            // 显示错误提示
            showAlert('更新失败: ' + (response.error || '发生错误，请稍后再试'), 'error');
          }
        },
        error: function (xhr, status, error) {
          // 恢复按钮状态
          submitBtn.html(originalBtnText);
          submitBtn.prop('disabled', false);
          
          console.error('更新用户信息失败:', xhr.responseText);
          showAlert('更新信息时出错，请稍后再试', 'error');
        }
      });
    });

    // 创建气泡动画效果
    function createBubbles() {
      const loader = document.querySelector('.ios-loader');
      if (loader) {
        setInterval(() => {
          const bubble = document.createElement('div');
          bubble.classList.add('bubble');
          bubble.style.left = Math.floor(Math.random() * 100) + '%';
          bubble.style.animationDuration = (Math.random() * 2 + 2) + 's';
          loader.appendChild(bubble);
          
          // 动画结束后移除气泡
          setTimeout(() => {
            bubble.remove();
          }, 3000);
        }, 300);
      }
    }
    
    // 初始化气泡效果
    createBubbles();
  });
  
  // 加载用户数据
  function loadUserData() {
    var token = localStorage.getItem('token');
    if (!token) {
      $('#userPoints').text('未登录');
      $('#topUserReduction').text('未登录');
      showAlert('请先登录', 'warning', function() {
        window.location.href = 'index.html';
      });
      return;
    }
    
    $.ajax({
      type: 'POST',
      url: 'get_user_points.php',
      data: { token: token },
      dataType: 'json',
        success: function (response) {
        if (response.success) {
          // 更新页面中的用户信息
          $('#userPoints').text(response.userPoints);
          var carbonReduction = response.userPoints / 10;
          $('#userReduction').text(carbonReduction);
          $('#topUserReduction').text(carbonReduction);
          $('#userSchool').text(response.school || '未设置');
          $('#userLocation').text(response.location || '未设置');

          // 头像显示（优先使用后端avatar_url/avatar_id）
          var avatarUrl = response.avatar_url || localStorage.getItem('userAvatarUrl') || 'img/avatars/avatar1.svg';
          $('#userAvatarImg').attr('src', avatarUrl);
          if (response.avatar_id) localStorage.setItem('userAvatarId', String(response.avatar_id));
          localStorage.setItem('userAvatarUrl', avatarUrl);
          
          // 保存用户数据到本地缓存
          localStorage.setItem('userSchool', response.school || '');
          localStorage.setItem('userLocation', response.location || '');
          localStorage.setItem('userCountry', response.country || '');
          localStorage.setItem('userState', response.state || '');
        } else {
          $('#userPoints').text('无法加载积分');
          $('#topUserReduction').text('无法加载');
          console.error('获取积分失败:', response.error);
          showAlert('请求用户数据失败，请稍后重试', 'error');
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
  console.log('服务器响应内容:', jqXHR.responseText);
        $('#userPoints').text('无法加载积分');
        $('#topUserReduction').text('无法加载');
        showAlert('请求用户数据失败，请稍后重试', 'error');
      }
    });
  }

  // 动态加载可选头像列表（支持PNG/SVG，基于ID）
  function loadAvatarChoices() {
    const grid = $('#avatarGrid');
    const currentId = parseInt(localStorage.getItem('userAvatarId') || '0', 10);
    grid.empty();
    $.ajax({
      url: 'list_avatars.php',
      type: 'GET',
      dataType: 'json',
      success: function(resp) {
        if (resp && resp.success && Array.isArray(resp.avatars)) {
          resp.avatars.forEach(function(a){
            const item = $('<div class="avatar-option" tabindex="0"></div>')
              .attr('data-id', a.id)
              .append($('<img>').attr('src', a.url).attr('alt', a.filename));
            if (currentId && a.id === currentId) {
              item.addClass('selected');
            }
            grid.append(item);
          });
        } else {
          grid.html('<div class="text-muted">无法加载头像列表</div>');
        }
      },
      error: function() {
        grid.html('<div class="text-danger">加载头像失败，请稍后重试</div>');
      }
    });
  }
  
  // 预填充用户表单
  function prepopulateUserForm() {
    // 异步加载国家和省份数据
    loadCountries().then(function() {
      const userCountry = localStorage.getItem('userCountry');
      if (userCountry) {
        $('#userCountrySelect').val(userCountry);
        // 加载并选择用户的国家/省份
        updateStates(userCountry).then(function() {
          const userState = localStorage.getItem('userState');
          if (userState) {
            $('#userStateSelect').val(userState);
          }
        });
      }
    });
    
    // 加载学校列表并根据用户选择进行调整
    loadSchools().then(function() {
      const userSchool = localStorage.getItem('userSchool');
      if (userSchool) {
        // 检查下拉选项中是否包含该学校
        let schoolFound = false;
        $('#userSchoolSelect option').each(function() {
          if ($(this).text() === userSchool) {
            $('#userSchoolSelect').val($(this).val());
            schoolFound = true;
            return false; // 退出循环
          }
        });
        
        // 如果在学校列表中找不到该学校，则选择"其他"
        if (!schoolFound && userSchool !== '') {
          $('#userSchoolSelect').val('other');
          $('#userSchoolInputGroup').show();
          $('#userSchoolInput').val(userSchool);
        }
      }
    });
  }
  
  // 修改loadCountries函数为Promise形式
  function loadCountries() {
    return new Promise((resolve, reject) => {
    fetch('./countries.json')
      .then(response => response.json())
      .then(data => {
          const countrySelect = document.getElementById('userCountrySelect');
          if (countrySelect) {
            countrySelect.innerHTML = ''; // 娓呯┖鐜版湁閫夐」
        data.forEach(country => {
              const option = document.createElement('option');
              option.value = country.code;
              option.textContent = country.name;
              countrySelect.appendChild(option);
            });
            resolve();
          } else {
            console.error('userCountrySelect element not found');
            reject('Element not found');
          }
        })
        .catch(error => {
          console.error('Error loading countries:', error);
          reject(error);
        });
    });
  }
  
  // 修改updateStates函数为Promise形式
  function updateStates(countryCode) {
    return new Promise((resolve, reject) => {
    fetch('./countries.json')
      .then(response => response.json())
      .then(data => {
          const statesSelect = document.getElementById('userStateSelect');
          if (statesSelect) {
            statesSelect.innerHTML = ''; // Clear current states/provinces
            const selectedCountry = data.find(country => country.code === countryCode);
        if (selectedCountry && selectedCountry.states) {
          selectedCountry.states.forEach(state => {
                const option = document.createElement('option');
                option.value = state.code;
                option.textContent = state.name;
                statesSelect.appendChild(option);
              });
            }
            resolve();
          } else {
            console.error('userStateSelect element not found');
            reject('Element not found');
          }
        })
        .catch(error => {
          console.error('Error updating states:', error);
          reject(error);
        });
    });
  }
  
  // 修改loadSchools函数为Promise形式
  function loadSchools() {
    return new Promise((resolve, reject) => {
      var token = localStorage.getItem('token');

    $.ajax({
        url: 'get_schools.php',
      type: 'POST',
      dataType: 'json',
        data: { token: token },
      success: function (data) {
          var schoolSelect = document.getElementById('userSchoolSelect');
          if (schoolSelect) {
            var schoolOptions = '<option value="">请选择学校Select school</option>';
        $.each(data, function (index, school) {
              schoolOptions += '<option value="' + school.id + '">' + school.name + '</option>';
            });
            schoolOptions += '<option value="other">其他 Other - Enter new</option>';
            $('#userSchoolSelect').html(schoolOptions);
            resolve();
          } else {
            console.error('userSchoolSelect element not found');
            reject('Element not found');
          }
      },
      error: function (xhr, status, error) {
          console.error('加载学校列表失败:', error);
          reject(error);
        }
      });
    });
  }
  
  // 绑定排依加点击事件
  function bindRankingButtons() {
    $('.ios-segment-control .segment').off('click');
    
    $('.ios-segment-control .segment').on('click', function() {
      const type = $(this).data('type');
      
      // 更新 active 状态
      $('.ios-segment-control .segment').removeClass('active');
      $(this).addClass('active');
      
      // 使用动画方式更新选择器位置
      moveSelector(this);
      
      // 加载对应排行榜数据
      if (type === 'local') {
        var userLocation = $('#userLocation').text().trim();
        if (!userLocation || userLocation === '未设置') {
          showAlert('用户地区信息未设置，请先在“编辑个人资料”中完善', 'warning');
          
          // 恢复为全部排行榜
          setTimeout(function() {
            $('.ios-segment-control .segment[data-type="all"]').click();
          }, 300);
          
          return;
        }
      } else if (type === 'school') {
        var userSchool = $('#userSchool').text().trim();
        if (!userSchool || userSchool === '未设置') {
          showAlert('用户学校信息未设置，请先在“编辑个人资料”中完善', 'warning');
          
          // 恢复为全部排行榜
          setTimeout(function() {
            $('.ios-segment-control .segment[data-type="all"]').click();
          }, 300);
          
          return;
        }
      }
      
      switchRanking(type);
    });
  }
  
  // 移动选择器到指定元素位置
  function moveSelector(target) {
    const selector = document.querySelector('.segment-selector');
    if (!selector || !target) return;
    
    // 获取控制器容器
    const container = target.parentElement;
    
    // 获取目标按钮的边界
    const targetRect = target.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    
    // 计算目标按钮的相对左偏移
    const relativeLeft = targetRect.left - containerRect.left;
    
    // 设置选择器宽度
    selector.style.width = `${targetRect.width - 6}px`;
    
    // 设置选择器的位置
    selector.style.transform = `translateX(${relativeLeft}px)`;
  }
  
  // 初始化选择器位置函数 - 新实现
  function initSegmentSelector() {
    // 获取活动段元素
    const activeSegment = document.querySelector('.ios-segment-control .segment.active');
    if (!activeSegment) return;
    
    // 使用动画方式定位选择器到活动段
    moveSelector(activeSegment);
  }
  
  // 切换排依加点击事件
  function switchRanking(type) {
    console.log('Switch leaderboard type:', type);
    
    // 显示加载动画
    $('#leaderboard-content').hide();
    $('.ios-loading').show();
    
    var token = localStorage.getItem('token');
    var userLocation = $('#userLocation').text().trim();
    var userSchool = $('#userSchool').text().trim();
    var data = {
      token: token,
      type: type,
    };

    // 根据排行榜类型设置请求参数
    if (type === 'local') {
      data.location = userLocation;
    } else if (type === 'school') {
      data.school = userSchool;
    }

    // 随后发送请求
    $.ajax({
      url: 'get_rank.php',
      type: 'POST',
      dataType: 'json',
      data: data,
      success: function (response) {
        // 闅愯棌加载动画
        $('.ios-loading').hide();
        $('#leaderboard-content').show();
        
        if (response.success) {
          // 清空现有排依加
          $('#leaderboard-content').empty();
          
          if (response.ranking && response.ranking.length > 0) {
            // 添加表格头部
            const tableHeader = $('<div class="ios-table-header">').append(
              $('<div class="col-rank">').text('Rank'),
              $('<div class="col-user">').text('Username'),
              $('<div class="col-points">').text('Credits')
            );
            $('#leaderboard-content').append(tableHeader);
            
            var currentUsername = localStorage.getItem('username');
            
            // 遍历排行榜数据并获取头像信息
            const usernames = response.ranking.map(user => user.username);
            
            // 获取用户头像信息
            $.ajax({
              url: 'get_users_avatars.php', 
              type: 'POST',
              dataType: 'json',
              data: { 
                token: token,
                userIds: JSON.stringify(usernames)
              },
              success: function(avatarResponse) {
                const avatarMap = {};
                if (avatarResponse && avatarResponse.success && avatarResponse.avatars) {
                  avatarResponse.avatars.forEach(avatar => {
                    avatarMap[avatar.username] = avatar.avatar_url || 'img/avatars/avatar1.svg';
                  });
                }
                
                // 渲染排行榜行
                $.each(response.ranking, function (index, user) {
                  var rank = index + 1;
                  var rankClass = '';
                  var rankHtml = '';
                  
                  if (rank <= 3) {
                    rankClass = 'top-rank rank-' + rank;
                    
                    // 修复状态徽章视觉问题按钮
                    if (rank === 1) {
                      rankHtml = '<div class="rank-medal gold"><i class="fas fa-trophy"></i></div>';
                    } else if (rank === 2) {
                      rankHtml = '<div class="rank-medal silver"><i class="fas fa-medal"></i></div>';
                    } else {
                      rankHtml = '<div class="rank-medal bronze"><i class="fas fa-award"></i></div>';
                    }
                  } else {
                    rankHtml = '<div class="rank-medal normal">' + rank + '</div>';
                  }
                  
                  // 如果是当前用户，添加高亮类
                  if (user.username === currentUsername) {
                    rankClass += ' current-user';
                  }
                  
                  // 获取用户头像URL
                  const avatarUrl = avatarMap[user.username] || 'img/avatars/avatar1.svg';
                  
                  // 创建用户信息容器（包含头像和用户名）
                  const userContainer = $('<div class="col-user">');
                  if (rank <= 3) {
                    // 前三名显示头像（圆环包裹）
                    const avatarWrap = $('<span class="avatar-wrap"></span>').append(
                      $('<img class="user-avatar">').attr('src', avatarUrl).attr('alt', user.username)
                    );
                    userContainer.append(
                      avatarWrap,
                      $('<span>').text(user.username)
                    );
                  } else {
                    // 其他排名只显示用户名
                    userContainer.text(user.username);
                  }
                  
                  // 创建行元素
                  const row = $('<div class="ios-table-row ' + rankClass + '">').append(
                    $('<div class="col-rank">').html(rankHtml),
                    userContainer,
                    $('<div class="col-points">').text(user.points)
                  );
                  
                  $('#leaderboard-content').append(row);
                });
              },
              error: function() {
                // 如果获取头像失败，使用默认头像渲染
                $.each(response.ranking, function (index, user) {
                  var rank = index + 1;
                  var rankClass = '';
                  var rankHtml = '';
                  
                  if (rank <= 3) {
                    rankClass = 'top-rank rank-' + rank;
                    
                    if (rank === 1) {
                      rankHtml = '<div class="rank-medal gold"><i class="fas fa-trophy"></i></div>';
                    } else if (rank === 2) {
                      rankHtml = '<div class="rank-medal silver"><i class="fas fa-medal"></i></div>';
                    } else {
                      rankHtml = '<div class="rank-medal bronze"><i class="fas fa-award"></i></div>';
                    }
                  } else {
                    rankHtml = '<div class="rank-medal normal">' + rank + '</div>';
                  }
                  
                  if (user.username === currentUsername) {
                    rankClass += ' current-user';
                  }
                  
                  // 创建用户信息容器
                  const userContainer = $('<div class="col-user">');
                  if (rank <= 3) {
                    userContainer.append(
                      $('<img class="user-avatar">').attr('src', 'img/avatars/avatar1.svg').attr('alt', user.username),
                      $('<span>').text(user.username)
                    );
                  } else {
                    userContainer.text(user.username);
                  }
                  
                  const row = $('<div class="ios-table-row ' + rankClass + '">').append(
                    $('<div class="col-rank">').html(rankHtml),
                    userContainer,
                    $('<div class="col-points">').text(user.points)
                  );
                  
                  $('#leaderboard-content').append(row);
                });
              }
            });
          } else {
            // 显示无数据状态
            const emptyState = $('<div class="ios-empty-state">').append(
              $('<i class="fas fa-trophy"></i>'),
              $('<p>').text('No ranking data available.')
            );
            $('#leaderboard-content').append(emptyState);
          }
        } else {
          // 显示错误提示信息
          const errorState = $('<div class="ios-empty-state">').append(
            $('<i class="fas fa-exclamation-circle"></i>'),
            $('<p>').text('Failed to load ranking data: ' + (response.error || 'Unknown error'))
          );
          $('#leaderboard-content').append(errorState);
        }
      },
      error: function () {
        // 闅愯棌加载动画
        $('.ios-loading').hide();
        $('#leaderboard-content').show();
        
        // 显示错误提示信息
        const errorState = $('<div class="ios-empty-state">').append(
          $('<i class="fas fa-exclamation-circle"></i>'),
          $('<p>').text('Failed to connect to the server. Please try again later.')
        );
        $('#leaderboard-content').append(errorState);
      }
    });
  }
  
  // 主题切换功能初始化
  function initThemeToggle() {
  const body = document.body;
  const themeToggle = document.getElementById('themeToggle');
    
    // 检查用户是否已有保存的主题
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      body.className = savedTheme;
      updateThemeIcon(savedTheme);
    } else {
      body.classList.add('auto-theme');
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        body.classList.add('dark-mode');
      }
      updateThemeIcon('auto-theme');
    }
    
    // 监听系统配色方案变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
      if (body.classList.contains('auto-theme')) {
        if (e.matches) {
          body.classList.add('dark-mode');
        } else {
          body.classList.remove('dark-mode');
        }
        updateThemeIcon('auto-theme');
      }
    });
    
    // 主题切换按钮点击处理
    themeToggle.addEventListener('click', function() {
      if (body.classList.contains('auto-theme')) {
        body.classList.remove('auto-theme');
        body.classList.remove('dark-mode');
        body.classList.add('dark-theme');
        localStorage.setItem('theme', 'dark-theme');
      } else if (body.classList.contains('dark-theme')) {
        body.classList.remove('dark-theme');
        body.classList.add('light-theme');
        localStorage.setItem('theme', 'light-theme');
      } else {
        body.classList.remove('light-theme');
        body.classList.add('auto-theme');
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          body.classList.add('dark-mode');
        }
        localStorage.setItem('theme', 'auto-theme');
      }
      updateThemeIcon(body.className);
    });
  }
  
  // 更新主题图标
  function updateThemeIcon(theme) {
    const icon = document.querySelector('#themeToggle i');
    if (!icon) return;
    
    if (theme.includes('dark-theme')) {
      icon.className = 'fas fa-sun';
    } else if (theme.includes('light-theme')) {
      icon.className = 'fas fa-moon';
    } else {
      // 自动主题图标
      let iconClass;
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        iconClass = 'fas fa-sun';
      } else {
        iconClass = 'fas fa-moon';
      }
      icon.className = iconClass;
    }
  }
  
  // 登出功能
  function logout() {
    localStorage.removeItem('token'); // 从 localStorage 中移除 token
    // 更新 UI 为未登录状态
    $('#userStatus').text('');
    $('#logoutButton').hide();
    $('#loginButton').show();
    Redirect('index.html');
  }
  
  // 页面跳转功能
  function Redirect(webpage) {
    window.location.href = webpage;
  }
</script></body></html>
